import React, { Component } from "react";
import Banner from "../../components/Banner/banner.jsx";
import one from "../../assets/images/one.jpg";
import two from "../../assets/images/two.jpg";
import three from "../../assets/images/three.jpg";
import Search from "./Search/Search.jsx";
import Item from "./Item/Item.jsx";
import HomeStyle from "./index.module.scss";
import api from "../../api/index.jsx";
export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      banner: [],
      items: [],
    };
  }
  componentDidMount() {
    this.setState({
      banner: [
        { id: 1, img: one },
        { id: 2, img: two },
        { id: 3, img: three },
      ],
    });
    api.getToday().then((res) => {
      this.setState({
        items: res.data.data,
      });
      console.log(this.state.items, 30);
    });
  }
  render() {
    return (
      <div style={{ height: "528px", position: "relative" }}>
        {/* 轮播图 */}
        <Banner arr={this.state.banner} />
        {/* 搜索框 */}
        <Search />
        {/* 今日推荐 */}
        <div className={HomeStyle.today}>
          <div className={HomeStyle.todayContainer}>
            <div className={HomeStyle.title}>11111</div>
            <div className={HomeStyle.pics}>
              {this.state.items?.map((item) => {
                return (
                  <div>
                    {/* {item.type} */}
                    <Item obj={item} />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
